<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-20 09:39:07
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-20 09:54:33
 * @FilePath: \vue-admin-template\src\views\yonghu\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-container direction="vertical" style="margin: 20px;">
    <el-header>
      <el-input
        v-model="searchId"
        placeholder="请输入学生ID"
        style="width: 200px; margin-right: 10px;"
      />
      <el-button type="primary" @click="searchStudent">搜索</el-button>
    </el-header>
    <el-main>
      <el-table :data="filteredStudents" stripe style="width: 100%">
        <el-table-column prop="id" label="学号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="password" label="密码" />
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      searchId: '',
      students: [
        // 这里应该是从后端获取的数据，这里只是模拟
        { id: 1, name: '张三', account: 'zhangsan', password: '123456' },
        { id: 2, name: '李四', account: 'lisi', password: '123456' },
        { id: 3, name: '王五', account: 'wangwu', password: '123456' },
        { id: 4, name: '赵六', account: 'zhaoliu', password: '123456' },
        { id: 5, name: '孙七', account: 'sunqi', password: '123456' }
      ]
    }
  },
  computed: {
    filteredStudents() {
      if (this.searchId) {
        // 如果搜索框有输入，则过滤学生列表
        return this.students.filter(student => student.id === parseInt(this.searchId))
      } else {
        // 否则显示全部学生列表
        return this.students
      }
    }
  },
  created() {
    // 初始化时随机显示3-5名学生
    this.students = this.students.sort(() => Math.random() - 0.5).slice(0, Math.floor(Math.random() * 3) + 3)
  },
  methods: {
    searchStudent() {
      // 当用户点击搜索按钮时，调用计算属性 filteredStudents 来更新列表
      if (!this.searchId) {
        this.$message({
          message: '请输入学生ID进行搜索',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style>
/* 在这里添加一些自定义样式 */
</style>
